<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      border: 1px solid #000;
    }
    #mainDiv{
      width: 200px;
      height: 1000px;
    }
    .head{
      background-color: aqua;
      height: 30px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }
    .body{
      background-color: yellow;
      height: 260px;
      text-align: center;
      display: none;
    }
  </style>

  <script>
    //引用正在显示的div对象
    var showDiv;
    window.onload = function (){
       showDiv = document.getElementById("blackDiv");
       //得到class属性为head的元素集合
       var headArray = document.getElementsByClassName("head");
       for(let i=0;i<headArray.length;i++){
         headArray[i].onclick = function (){
           showBody(this);
         }
       }
    }

    function showBody(headObj){
        showDiv.style.display = "none";
        headObj.nextElementSibling.style.display = "block";
        showDiv = headObj.nextElementSibling;
    }
  </script>
</head>
<body>
<div id="mainDiv">
  <div class="head">好友</div>
  <div class="body">
    阳顶天<br>
    陈近南<br>
    韦小宝
  </div>
  <div class="head">亲人</div>
  <div class="body">
    令狐冲<br>
    张康年<br>
    胡斐
  </div>
  <div class="head" >黑名单</div>
  <div class="body" id="blackDiv" style="display: block">
    海大富<br>
    岳不群<br>
    林平之
  </div>
</div>
</body>
</html>
